var uiu = document.querySelector(".two2")
var soo = document.querySelector(".soo")
var xs = document.querySelector("#xs")
var lol = document.querySelector("#lol")
var pop = document.querySelector(".pop")
var opo = document.querySelector(".opo")
var lkl = document.querySelector("#lkl")
var jk = document.querySelector(".jk")
uiu.onclick = function() {
	soo.style.display = "block"
}
xs.onclick = function() {
	soo.style.display = "none"
}
lol.onclick = function() {
	pop.style.display = "block"
	opo.style.display = "none"
	jk.style.display = "none"
}
lkl.onclick = function() {
	opo.style.display = "none"
	jk.style.display = "block"
}
lol.onkeydown = function(e) {
	if (e.keyCode === 13) {
		opo.style.display = "none"
		jk.style.display = "block"
		pop.style.display = "none"
	}
}
var tyt1 = document.querySelectorAll(".tyt1")
for (var q = 0; q < tyt1.length; q++) {
	tyt1[q].onclick = function() {
		var lol = document.querySelector("#lol")
		lol.value = this.innerHTML
		pop.style.display = "none"
		opo.style.display = "block"
	}

}

var acts = document.querySelector("#act")
var boxEr = document.querySelector(".box-er")
acts.onmouseover = function() {
	boxEr.setAttribute("style", "display:block;")
}
acts.onmouseleave = function() {
	boxEr.setAttribute("style", "display:none;")
}
var inp1 = document.querySelector(".inp1")
var inp2 = document.querySelector(".inp2")
var inp3 = document.querySelector(".inp3")
var inp4 = document.querySelector(".inp4")
var inp5 = document.querySelector(".inp5")
var inp6 = document.querySelector(".inp6")
var iii = document.querySelector(".iii")
var ooo = document.querySelector(".ooo")
inp1.onfocus = function() {
	ooo.style.display = "none"
	iii.style.display = "none"
	this.style.border = "1px solid red"
	inp2.style.border = ""
}
inp1.onblur = function() {
	iii.style.display = "block"
	ooo.style.display = "none"
}
inp2.onfocus = function() {
	ooo.style.display = "none"
	iii.style.display = "none"
	this.style.border = "1px solid red"
	inp1.style.border = ""
}
inp2.onblur = function() {
	ooo.style.display = "block"
	iii.style.display = "none"
}
inp3.onclick = function() {
	inp4.classList.remove("hide")
	this.style.border = "1px solid red"
	ooo.style.display = "none"
	iii.style.display = "none"
	inp1.style.border = ""
	inp2.style.border = ""
}
inp4.onclick = function() {
	inp5.classList.remove("hide")
	this.style.border = "1px solid red"
	inp3.style.border = ""
}
inp5.onclick = function() {
	inp6.classList.remove("hide")
	this.style.border = "1px solid red"
	inp4.style.border = ""
}
inp6.onclick = function() {
	this.style.border = "1px solid red"
	inp5.style.border = ""
}
inp6.onblur = function() {
	this.style.border = ""
}
var curr1 = document.querySelector(".curr1")
var add = document.querySelector(".add")
var off = document.querySelector("#off")
var on = document.querySelector("#on")
var big = document.querySelector(".big")
var ob = document.querySelector("#ob")
curr1.onclick = function() {
	add.classList.remove("hide")
	ob.style.display = "none"
	on.style.display = "block"

}

off.onclick = function() {
	add.classList.add("hide")
}
var address = document.querySelector(".address")

on.onclick = function() {
	add.classList.add("hide")
	var newdiv = document.createElement("div")
	newdiv.className = "curr"
	newdiv.innerHTML = `
	<div class="logo2">
		默认
	</div>
	<p class="perple">
		<span class="names">${inp1.value}</span><span class="phone">${inp2.value}</span>
		<span class="text update" style="margin-left: 115px;">编辑</span>
		<span class="text dell" style="margin-left: 20px;">删除</span>
	</p>
	<p class="text2">
		<span class="shen">${inp3.value}</span><span class="shi">${inp4.value}</span><span class="xian">${inp5.value}</span>
		<span class="jiedao">${inp6.value}</span><span class="dizi">${big.value}</span>
	</p>
	`
	address.insertBefore(newdiv, address.firstChild)
	inp1.value = ""
	inp2.value = ""
	inp3.value = ""
	inp4.value = ""
	inp5.value = ""
	inp6.value = ""
	big.value = ""
}
var uppdates = null
var names = document.querySelector(".names")
var phone = document.querySelector(".phone")
var shen = document.querySelector(".shen")
var shi = document.querySelector(".shi")
var xian = document.querySelector(".xian")
var jiedao = document.querySelector(".jiedao")
var dizi = document.querySelector(".dizi")
address.onclick = function(e) {
	if (e.target.classList.contains("dell")) {
		e.target.parentElement.parentElement.remove()
	}
	if (e.target.classList.contains("update")) {
		add.classList.remove("hide")
		on.style.display = "none"
		ob.style.display = "block"
		var curr = e.target.parentElement.parentElement
		inp1.value = names.innerHTML
		inp2.value = phone.innerHTML
		inp3.value = shen.innerHTML
		inp4.value = shi.innerHTML
		inp5.value = xian.innerHTML
		inp6.value = jiedao.innerHTML
		big.value = dizi.innerHTML
	}
	ob.onclick = function() {
		names.innerHTML = inp1.value
		phone.innerHTML = inp2.value
		shen.innerHTML = inp3.value
		shi.innerHTML = inp4.value
		xian.innerHTML = inp5.value
		jiedao.innerHTML = inp6.value
		dizi.innerHTML = big.value
		add.classList.add("hide")
		inp1.value = ""
		inp2.value = ""
		inp3.value = ""
		inp4.value = ""
		inp5.value = ""
		inp6.value = ""
		big.value = ""
	}

}
var dui1 = document.querySelector("#dui1")
var dui2 = document.querySelector("#dui2")
dui1.onclick = function() {
	this.classList.add("icon-fuxuankuang_xuanzhong1")
	this.classList.remove("icon-fuxuankuang_xuanzhong")
	dui2.classList.add("icon-fuxuankuang_xuanzhong")
	dui2.classList.remove("icon-fuxuankuang_xuanzhong1")
}
dui2.onclick = function() {
	this.classList.add("icon-fuxuankuang_xuanzhong1")
	this.classList.remove("icon-fuxuankuang_xuanzhong")
	dui1.classList.add("icon-fuxuankuang_xuanzhong")
	dui1.classList.remove("icon-fuxuankuang_xuanzhong1")
}
